$euiBadgeGroupGutterTypes: (
  gutterExtraSmall: $euiSizeXS,
  gutterSmall: $euiSizeS,
);

.euiBadgeGroup__item {
  display: inline-block;
  max-width: 100%;
}

// Gutter Sizes
@each $gutterName, $gutterSize in $euiBadgeGroupGutterTypes {
  $halfGutterSize: $gutterSize * 0.5;

  .euiBadgeGroup--#{$gutterName} {
    margin: -$halfGutterSize;

    & > .euiBadgeGroup__item {
      margin: $halfGutterSize;
      max-width: calc(100% - #{$gutterSize});
    }
  }
}
